<!--
 * @Author: szx
 * @Date: 2022-05-25 19:38:56
 * @LastEditTime: 2022-05-25 19:45:42
 * @Description: 
 * @FilePath: \learn\测试\index2.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标活动范围</title>
    <style>
        .triggerArea {
            width: 177.343px;
            height: 167.333px;
            margin: 88.88px auto;
            background-color: #f6f6f6;
        }

        .mask {
            width: 200px;
            height: 150px;
            position: absolute;
            top: 20.33px;
            left: calc(50% - 100px);
            /* pointer-events: none; */
            background-color: rgba(155, 155, 155, 0.3);
        }
    </style>

</head>

<body>
    <div class="triggerArea"></div>

    <script>

        function comeIn() {
            console.log('come in')
        }

        function comeOut() {
            console.log('come out')
        }

        function removeMaskEle() {
            let maskEle = document.querySelector(".mask");
            maskEle && maskEle.parentNode.removeChild(maskEle);
        }

        function createSingle(fn) {
            let single = null;
            return function () {
                return single = single || (single = fn());
            }
        }

        function createMaskEle() {
            let maskEle = document.createElement("div");
            maskEle.className = 'mask';
            return maskEle;
        }

        function addMaskEle() {
            let maskEle = createSingle(createMaskEle)();
            document.body.appendChild(maskEle);
        }

        let areaEle = document.querySelector(".triggerArea");
        areaEle.onmouseenter = function () {
            addMaskEle();
        }

        areaEle.onmouseleave = function () {
            removeMaskEle()
        }  
    </script>
</body>

</html>